import { get_bind_platform_list, unbind_platform } from '@/services/instiution';
import { InfoCircleTwoTone, PlusOutlined } from '@ant-design/icons';
import { ActionType, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
import { Button, Divider, message, Modal } from 'antd';
import { useRef, useState } from 'react';
import AddInstitution from './components/AddInstitution';
type GithubIssueItem = {
  id: number;
  phone: string;
  name: string;
  unique_code: string;
  comments: number;
  bind_time: string;
};
const AssociationInstitution = () => {
  const actionRef = useRef<ActionType>();
  // 存储当前id
  const [id, setId] = useState<number>();
  // 控制新增模态框的状态
  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
  // 控制解绑模态框状态
  const [unbinding, setUnbinding] = useState(false);

  // 控制新增模态框的显示与隐藏
  const isShowAddModal = (status: boolean) => {
    setIsAddModalOpen(status);
  };
  // 控制解绑模态框的显示与隐藏
  const isShowUnbinding = (status: boolean) => {
    setUnbinding(status);
  };

  // 获取机构列表
  const getInstiution = async (params: {
    pageSize?: number | undefined;
    current?: number | undefined;
    keyword?: string | undefined;
  }) => {
    //默认分页参数和后端接口字段不匹配
    let request_body = {
      ...params,
      current: params.current,
      pageSize: params.pageSize,
    };
    console.log(params);
    const res = await get_bind_platform_list(request_body);
    // console.log('机构列表', res);
    return {
      data: res.data.list,
      success: true,
      total: res.data.total_count,
    };
  };
  // 确认解绑的回调
  const delOk = async () => {
    let request_body = {
      id,
    };
    const res: any = await unbind_platform(request_body);
    if (res.msg == 'ok') {
      message.success('解绑成功');
      actionRef.current?.reload();
    } else {
      message.error(res.msg);
    }
    isShowUnbinding(false);
  };
  // 机构列表
  const columns: ProColumns<GithubIssueItem>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      align: 'center',
      width: 48,
    },
    {
      title: '机构账号',
      dataIndex: 'phone',
      align: 'center',
    },
    {
      title: '机构名称',
      dataIndex: 'name',
      align: 'center',
    },
    {
      title: '机构编号',
      dataIndex: 'unique_code',
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '关联时间',
      key: 'bind_time',
      dataIndex: 'bind_time',
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '关联时间',
      key: 'bind_time',
      dataIndex: 'bind_time',
      valueType: 'dateRange',
      align: 'center',
      hideInTable: true,
      search: {
        transform: (value) => {
          return {
            start_date: value[0],
            end_date: value[1],
          };
        },
      },
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      align: 'center',
      render: (text, record, _, action) => (
        <a
          key="editable"
          onClick={() => {
            setId(record.id);
            isShowUnbinding(true);
          }}
        >
          解绑
        </a>
      ),
    },
  ];
  return (
    <PageContainer breadcrumb={false}>
      <ProTable<GithubIssueItem>
        columns={columns}
        actionRef={actionRef}
        cardBordered
        request={async (params = {}) => getInstiution(params)}
        editable={{
          type: 'multiple',
        }}
        rowKey={(record) => record.id}
        search={{
          labelWidth: 'auto',
        }}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        pagination={{
          pageSize: 10,
        }}
        dateFormatter="string"
        headerTitle="机构列表"
        toolBarRender={() => [
          <Button
            key="button"
            icon={<PlusOutlined />}
            onClick={() => {
              isShowAddModal(true);
            }}
            type="primary"
          >
            新增
          </Button>,
        ]}
      />
      {/* 新增关联机构申请 */}
      {isAddModalOpen ? (
        <AddInstitution
          isAddModalOpen={isAddModalOpen}
          isShowAddModal={isShowAddModal}
          actionRef={actionRef}
        ></AddInstitution>
      ) : (
        ''
      )}
      {/* 解绑确认 */}
      <Modal title="解绑确认" open={unbinding} onOk={delOk} onCancel={() => isShowUnbinding(false)}>
        <Divider />
        <p>
          <InfoCircleTwoTone twoToneColor="#ffcc00" /> 解绑后将不建立关联关系，确定要解绑吗？
        </p>
      </Modal>
    </PageContainer>
  );
};
export default AssociationInstitution;
